<template>
  <div id="order">
    <!-- 标题 -->
    <div id="bar"></div>
    <p>订单管理</p>
    <!-- 输入框 -->
    <div id="input">
      <el-select v-model="value" placeholder="全部订单">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 时间 -->
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <!-- 手机号 -->
      <el-input placeholder="输入订单号，手机号查询" v-model="input" clearable>
      </el-input>
      <!-- 按钮 -->
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="showTableData" border style="width: 100%">
      <el-table-column prop="id" label="订单编号"> </el-table-column>
      <el-table-column prop="project.name" label="项目名称"> </el-table-column>
      <el-table-column prop="project.price" label="订单金额"> </el-table-column>
      <el-table-column prop="state" label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 1">待支付</span>
          <span v-if="scope.row.state === 2">待确认</span>
          <span v-if="scope.row.state === 3">待服务</span>
          <span v-if="scope.row.state === 4">已完成</span>
          <span v-if="scope.row.state === 5">已取消</span>
          <span v-if="scope.row.state === 6">退款中</span>
          <span v-if="scope.row.state === 7">已退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="user.name" label="客户姓名"> </el-table-column>
      <el-table-column prop="user.phone" label="联系手机"> </el-table-column>
      <el-table-column prop="date" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.date | timestampToTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 12, 24, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "Order",
  data() {
    return {
      value1: "", //时间框
      tableData: [], //装渲染数据
      urs: [], //装详情
      currentPage: 1,
      pageSize: 5, //每页条数
      options: [
        {
          value: "全部订单",
          label: "全部订单",
        },
        {
          value: "待服务",
          label: "待服务",
        },
        {
          value: "已完成",
          label: "已完成",
        },
        {
          value: "待支付",
          label: "待支付",
        },
        {
          value: "退款中",
          label: "退款中",
        },
        {
          value: "已退款",
          label: "已退款",
        },
        {
          value: "已取消",
          label: "已取消",
        },
      ],
      // TableData: [
      //   {
      //     order_id: "1001",//订单编号
      //     project_name: "肩颈按摩",//项目名称
      //     project_price: "109.0",//订单金额
      //     state: "待服务",//状态
      //     consumer_nickname: "王小虎",//客户名称
      //     consumer_login_phone: "13900139000",//客户电话
      //     order_date: "2020-09-01 17:00",//创建时间
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Payment_time:"2020-09-01 17:00",//支付时间
      //     finance_id:"202009011700883736453",//交易流水
      //     Payment_method:"支付宝支付"//支付方式

      //   },
      //   {
      //     order_id: "1002",
      //     project_name: "肩颈按摩",
      //     project_price: "129.0",
      //     state: "已完成",
      //     consumer_nickname: "王二虎",
      //     consumer_login_phone: "13900139000",
      //     order_date: "2020-09-01 17:00",
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Payment_time:"2020-09-01 17:00",//支付时间
      //     finance_id:"202009011700883736453",//交易流水
      //     Payment_method:"微信支付",//支付方式
      //     dissipate:"2020-09-01 17:00",//消费时间
      //   },
      //   {
      //     order_id: "1003",
      //     project_name: "肩颈按摩",
      //     project_price: "129.0",
      //     state: "待支付",
      //     consumer_nickname: "王小虎",
      //     consumer_login_phone: "13900139000",
      //     order_date: "2020-09-01 17:00",
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //   },
      //   {
      //     order_id: "1004",
      //     project_name: "肩颈按摩",
      //     project_price: "129.0",
      //     state: "退款中",
      //     consumer_nickname: "王虎",
      //     consumer_login_phone: "13900139000",
      //     order_date: "2020-09-01 17:00",
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Payment_time:"2020-09-01 17:00",//支付时间
      //     finance_id:"202009011700883736453",//交易流水
      //     Payment_method:"支付宝支付",//支付方式
      //     Refund_time:"2020-09-01 17:00",//申请退款时间
      //   },
      //   {
      //     order_id: "1005",
      //     project_name: "肩颈按摩",
      //     project_price: "129.0",
      //     state: "已退款",
      //     consumer_nickname: "王三虎",
      //     consumer_login_phone: "13900139000",
      //     order_date: "2020-09-01 17:00",
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Payment_time:"2020-09-01 17:00",//支付时间
      //     finance_id:"202009011700883736453",//交易流水
      //     Payment_method:"支付宝支付",//支付方式
      //     Refunda_time:"2020-09-01 17:00",//申请退款时间
      //     Refund_time:"2020-09-01 17:00",//退款时间

      //   },
      //   {
      //     order_id: "1006",
      //     project_name: "肩颈按摩",
      //     project_price: "129.0",
      //     state: "已取消",
      //     consumer_nickname: "王四虎",
      //     consumer_login_phone: "13900139000",
      //     order_date: "2020-09-01 17:00",
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Cancellation_time:"2020-09-01 17:00",//取消时间
      //   },
      //   {
      //     order_id: "1001",//订单编号
      //     project_name: "肩颈按摩",//项目名称
      //     project_price: "109.0",//订单金额
      //     state: "待服务",//状态
      //     consumer_nickname: "王五虎",//客户名称
      //     consumer_login_phone: "13900139000",//客户电话
      //     order_date: "2020-09-01 17:00",//创建时间
      //     project_time:"80分钟",//项目时长
      //     project_describe:"推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。",//项目简介
      //     Discount_amount:"10.0",//优惠金额
      //     payment:"99.0",//支付金额
      //     Payment_time:"2020-09-01 17:00",//支付时间
      //     finance_id:"202009011700883736453",//交易流水
      //     Payment_method:"支付宝支付"//支付方式
      //   },
      // ],
      value: "", //下拉框
      input: "", //手机号
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //详情
    handleClick(row) {
      // console.log(row.id);
      this.$axios({
        url: "http://172.16.113.53:8888/order/queryOrderDetails",
        method: "post",
        data: qs.stringify({
          orderId: row.id,
        }),
      })
        .then((res) => {
          console.log("获取订单详情信息", res);
          if (res.code === 200) {
            this.urs = res.data.data[0];
            console.log(this.urs);
            if (row.state === 1) {
              console.log("11111", this.urs);
              this.$router.push({
                name: "orderDetails",
                params: { data: this.urs },
              });
            } else if (row.state === 2) {
              this.$router.push({
                name: "orderfw",
                params: { data: this.urs },
              });
            } else if (row.state === 3) {
              this.$router.push({
                name: "orderwc",
                params: { data: this.urs },
              });
            } else if (row.state === 4) {
              this.$router.push({
                name: "orderqx",
                params: { data: this.urs },
              });
            } else if (row.state === 5) {
              this.$router.push({ name: "ordert", params: { data: this.urs } });
            } else if (row.state === 6) {
              this.$router.push({
                name: "ordertk",
                params: { data: this.urs },
              });
            }
            // console.log(row);
            // console.log("打印state", row.state);
          } else {
            this.$message({
              message: "服务器出错了",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("获取订单信息失败", err);
        });
    },
    //点击搜索
    search() {
      //获取输入框的值
      window.console.log(this.value, this.value1, this.input);
      let input = this.input
      this.$axios({
        // url: "http://192.168.31.111:8080/order/queryOrderList",
        //url: "http://172.16.113.113:5000/order/queryOrderList",
        url: "http://172.16.113.53:8888/order/queryOrder",
        method: "post",
        params:{
          str:input
        }
      })
        .then((res) => {
          console.log("查询成功", res);
          if (res.code === 200) {
            this.$message({
              message: "查询成功",
              type: "success",
            });
              this.tableData = res.data.data;
            console.log(res.data.data);
          } else {
            this.$message({
              message: "服务器出错了",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("查询失败", err);
        });
    },
    //查询所有订单数据
    getOr() {
      this.$axios({
        // url: "http://192.168.31.111:8080/order/queryOrderList",
        //url: "http://172.16.113.113:5000/order/queryOrderList",
        url: "http://172.16.113.53:8888/order/queryOrderList",
        method: "post",
      })
        .then((res) => {
          console.log("获取所有订单信息", res);
          if (res.code === 200) {
            this.tableData = res.data.data;

            console.log(this.tableData);
          } else {
            this.$message({
              message: "服务器出错了",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("获取订单信息失败", err);
        });
    },
  },
  created() {
    this.getOr();
  },
  mounted() {},
  computed: {
    showTableData() {
      let start = this.pageSize * (this.currentPage - 1);
      let end = start + this.pageSize;
      let data = this.tableData.slice(start, end);
      return data;
    },
  },
  watch: {},
};
</script>

<style scoped>
#order > div {
  float: left;
}
#bar {
  width: 3px;
  height: 20px;
  border: 1px solid #797979;
  background-color: #797979;
  float: left;
  margin-right: 10px;
}
#input {
  width: 100%;
  height: 70px;
  /* border: 1px solid #797979; */
}
.el-pagination {
  margin-left: 30%;
  margin-top: 30px;
}
.el-select {
  line-height: 70px;
  width: 250px;
}
.el-input {
  width: 200px;
}
#input > :nth-child(3) {
  width: 350px;
  margin-left: 50px;
  margin-right: 30px;
}
</style>